<template>
    <div class="login-background"></div>
    <div class="login-container">
        <div class="title-container">
            <div>点餐系统-商家端</div>
            <div>smart-restaurant</div>
        </div>
        <el-form @submit.prevent="handleSubmit" style="margin-top: 40px;">
            <el-form-item>
                <div class="form-container">
                    <el-icon style="font-size: 20px;">
                        <User />
                    </el-icon>
                    <el-input v-model="username" :clearable="true" placeholder="账号" />
                </div>
            </el-form-item>
            <el-form-item>
                <div class="form-container">
                    <el-icon style="font-size: 20px;">
                        <Lock />
                    </el-icon>
                    <el-input type="password" placeholder="密码" v-model="password" show-password />
                </div>
            </el-form-item>
            <el-button style="width: 100%;" type="warning" native-type="submit">登录</el-button>
        </el-form>
    </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '../stores/userInfo'
const router = useRouter()
const userInfoStore = useUserInfoStore()
const username = ref('');
const password = ref('');
const onTouchstart = () => {
    console.log('touchstart')
}

const handleSubmit = () => {
    if (!username.value || !password.value) {
        // alert('请输入完整登录信息');
        ElMessage.error('请输入用户名和密码')
        return;
    }
    // 后续接入API逻辑
    console.log('登录信息：', {
        username: username.value,
        password: password.value
    });
    userInfoStore.setUserInfo({
        username: username.value,
        password: password.value
    })
    nextTick(() => {
        router.push('/home')
    })
};
</script>

<style lang="scss" scoped>
.form-container {
    display: flex;
    border-bottom: 1px solid rgba(187, 187, 187, 1);
    padding: 5px 0;
    width: 340px;
    align-items: center;

    img {
        height: 43px;
        width: 43px;
    }

    :deep(.el-input__wrapper) {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: unset;
    }

    :deep(.el-input__inner) {
        color: #FFF;
    }
}

.title-container {
    div:nth-child(1) {
        font-size: 2.5rem;
        color: #FFF;
        font-weight: bold;
    }
}

.login-container {
    position: relative;
    z-index: 2;
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 8px;
    color: #FFF;
}

.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('/src/assets/images/bg.png') no-repeat center center;
    background-size: cover;
    filter: brightness(0.8);
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
}
</style>
